<template>
	<div class="envelopes">
		<div class="envelopes_box">
			<div class="envelopes_img">
				<img src="http://o6wndwjxn.qnssl.com/a28e5201812261040583858.jpg" alt="">
			</div>
			<div class="envelopes_item" >
				<div class="envelopes_transverse" v-for="(item,index) in envelopes_transverse" :key='index'>
					<div class="envelopes_vertical" v-for="(ite,ind) in item.vertical" :key='ind'>
						<img v-if='ite.status' src="http://o6wndwjxn.qnssl.com/6d954201812261041017855.png" alt="" @click="enve_rob(index,ind)">
						<img v-else src="http://o6wndwjxn.qnssl.com/6d954201812261041017855.png" alt="" style="opacity: 0.6;">
					</div>
				</div>
			</div>
		</div>
		
		<div class="enve_true" v-show="enve_true">
			<img src="http://o6wndwjxn.qnssl.com/62f96201812261041059442.png" alt="">
			<div v-if="enve_true_money" class="enve_true_true">
				<div class="even_tt_title">恭喜您抢到 <span>现金红包</span></div>
				<div class='even_tt_money'>{{money}}<span>元</span></div>
			</div>
			<div v-else class="even_true_false">
				<div class="even_tt_title">很遗憾~</div>
				<div class='even_tt_money_tow'>
					<img src="http://o6wndwjxn.qnssl.com/d9c2e201812261041092486.png" alt="">
					<div>您与红包擦肩而过</div>
				</div>
			</div>
			<div class="enve_ture_btn" @click="enve_true_click">
				继续抢
			</div>
		</div>
		
		
		<div class="enve_tips" v-show="enve_tips" @click="enve_click">{{tips}}</div>
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		data() {
			return {
				money:'',
				tips:'',
				enve_tips:false,
				enve_true:false,
				enve_true_money:false,
				envelopes_transverse:[
					{
						vertical:[
							{
								status:true
							},
							{
								status:true
							},
							{
								status:true
							},
							{
								status:true
							},
							{
								status:true
							}
						]
					},{
						vertical:[
							{
								status:true
							},
							{
								status:true
							},
							{
								status:true
							},
							{
								status:true
							},
							{
								status:true
							}
						]
					},{
						vertical:[
							{
								status:true
							},
							{
								status:true
							},
							{
								status:true
							},
							{
								status:true
							},
							{
								status:true
							}
						]
					},{
						vertical:[
							{
								status:true
							},
							{
								status:true
							},
							{
								status:true
							},
							{
								status:true
							},
							{
								status:true
							}
						]
					},
				],
			};
		},
		created(){
			this.getRedlist()
		},
		methods:{
			enve_click(){
				this.enve_tips = false
			},
			getRedlist(){
				let requery = {
					member_id: this.$store.state.member_id
				}
				axios.post('http://web.zhiyunzaixian.com/Party/v1.party/red_list',requery).then(res=>{
					let {code,data} =res.data
					// console.log(data)
					if(code == 200){
						for(var i = 0 ; i <data.length ; i ++){
							var click_num = data[i].split(',')
							this.envelopes_transverse[click_num[0]].vertical[click_num[1]].status = false
						}
					}
				})
			},
			
			
			enve_true_click(){
				this.enve_true = false
			},
			enve_rob(index,ind){
				this.enve_true_money = false
				var red = index + ',' + ind
				let requery = {
					member_id: this.$store.state.member_id,
					red:red
				}
				axios.post('http://web.zhiyunzaixian.com/Party/v1.party/red_bag',requery).then(res=>{
					// console.log(res)
					let {code , data,msg} = res.data
					if(code == 200 ){
						this.enve_true = true
						this.envelopes_transverse[index].vertical[ind].money = data
						this.money = data
						this.envelopes_transverse[index].vertical[ind].status = false
						if(data >0){
							this.enve_true_money = true
						}else{
							this.enve_true_money = false
						}
					}
					if(code == -40004){
						this.tips = msg
						this.enve_tips = true
					}
					if(code == -303){
						this.tips = msg
						this.enve_tips = true
					}
					if(code == -909){
						this.tips = msg
						this.enve_tips = true
					}
				})
			}
		}
	}
</script>

<style>
	.enve_tips{
		width: 100vw;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		background: rgba(0,0,0,0.8);
		font-size: 50px;
		font-weight: bold;
		line-height: 100vh;
		color: white;
		text-align: center;
	}
	
	.enve_ture_btn{
		position: absolute;
		left: calc(50vw - 120px);
		top: calc(25% + 306px);
		background:white;
		width: 240px;
		height: 39px;
		background: #fee94e;
		border-radius: 4px;
		line-height: 39px;
		font-size: 15px;
		color: #db483c;
		font-weight: bold;
	}
	.enve_true{
		width: 100vw;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		background: rgba(0,0,0,0.8);
		z-index: 200;
		text-align: center;
		overflow: hidden;
	}
	.enve_true>img{
		position: absolute;
		left: calc(50vw - 150px);
		top: 20%;
		width: 300px;
		z-index: -1;
	}
	.enve_true_true,
	.even_true_false{
		position: absolute;
		top: 20%;
		/* background: rgba(255,255,255,0.5); */
		left: calc(50vw - 150px);
		width: 300px;
		height: 306px;
		overflow: hidden;
	}
	.even_tt_title{
		font-size: 15px;
		color: #7a2716;
		font-weight: bold;
		margin-top: 80px;
	}
	.even_tt_title>span{
		font-size: 18px;
		color: #db483c;
	}
	.even_tt_money_tow>img{
		height: 50px;
		margin-top: 20px;
		margin-bottom: 5px;
	}
	.even_tt_money_tow>div{
		font-size: 18px;
		color: #db483c;
		font-weight: bold;
	}
	
	
	.even_tt_money{
		margin-top: 23px;
		font-size: 48px;
		color: #db483c;
	}
	.even_tt_money>span{
		font-size: 24px;
	}
	
	.envelopes_box{
		position: relative;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
	}
	.envelopes_img{
		background: #631115;
		position: absolute;
		width: 100%;
		height: 100%;
		text-align: center;
		left: 0;
		top: 0;
	}
	.envelopes_img>img{
		height: 100%;
	}
	.envelopes_item{
		position: absolute;
		width: 66vw;
		height: 40vh;
		left: 17vw;
		bottom: 15vh;
	}
	.envelopes_item:after{
		content: '点击开始抢红包';
		position: absolute;
		left: 0;
		height: 50px;
		line-height: 50px;
		top: -50px;
		width: 100%;
		font-size: 15px;
		font-weight: bold;
		color: #641014;
		text-align: center;
	}
	.envelopes_transverse{
		height: 25%;
		width: 100%;
		display: flex;
	}
	.envelopes_vertical{
		flex: 1;
	}
	.envelopes_vertical>img{
		width: 100%;
		height: 100%;
		transform:scale(0.95);
	}
	.envelopes_title{
		text-align: center;
		font-size: 15px;
		color: #641014;
		font-weight: bold;
	}
	
</style>
